<template>
    <div class="movie-view has-header">
        <template v-if="isShowLoading">
            <loading></loading>
        </template>
        <template v-else>
            <Scroller :title="hotMovies.title" type="hasCover" :items="hotMovies.subjects"></Scroller>
            <Scroller :title="newMovies.title" type="hasCover" :items="newMovies.subjects"></Scroller>
            <Scroller :title="topMovies.title" type="hasCover" :items="topMovies.subjects"></Scroller>
            <Scroller :title="movieTags.title" type="onlyString" :items="movieTags.subjects"></Scroller>
            <Types></Types>
            <DownloadApp></DownloadApp>
        </template>
    </div>
</template>

<script>
import Scroller from '../components/Scroller'
import DownloadApp from '../components/DownloadApp'
import Loading from '../components/Loading'
import Types from '../components/Types'
import {mapState, mapActions} from 'vuex'

export default {
    name: 'MovieView',
    data(){
        return {
            isShowLoading: true
        }
    },
    computed: {
        ...mapState({
            hotMovies: state => state.movie.hotMovies,
            topMovies: state => state.movie.topMovies,
            newMovies: state => state.movie.newMovies,
            movieTags: state => state.movie.movieTags
        })

    },
    components: {
        Scroller, DownloadApp, Loading, Types
    },
    created () {
        this.$store.dispatch('getMovie').then((result) => {
            this.isShowLoading = false;
        });
    },
    methods: {
    
    }
}
</script>

<style lang="scss" scoped>

</style>
